<script lang="ts">
export enum OrderSalesType {
  ORDER = '1',
  SALES = '2'
}
</script>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { segmentHeight } from '@/utils/lib'
import usePx2rempx from '@/hook/px2rempx'
import { client } from '@/utils/http'
import { useQuery } from '@tanstack/vue-query'
import useFilterStore from '@/stores/filter'
import { storeToRefs } from 'pinia'
import { toPercent, toThousand, isEmpty } from '@/utils/filter'
import type { CarouselRef } from 'ant-design-vue/es/carousel'
import { debounce } from 'lodash-es'
import useCarousel from '@/hook/carousel'

const props = withDefaults(
  defineProps<{
    type: OrderSalesType
  }>(),
  {}
)

const carouselRef = ref<CarouselRef>()

const carContainerRef = ref<HTMLDivElement>()

useCarousel(carContainerRef, carouselRef)

const filterStore = useFilterStore()

const { ymdId, checkDataUpdateNum, consultantListUpdateNum } = storeToRefs(filterStore)

const chartRef = ref()

const tabs = [
  { label: '车型', value: 1 },
  { label: '顾问', value: 2 }
]

const tabType = ref(1)

const url =
  props.type === OrderSalesType.SALES
    ? '/saleCoreBoard/getMonthSales'
    : '/saleCoreBoard/getMonthNewOrder'

const { data, isFetching } = useQuery<{
  overview: {
    newOrderSpeedRegion: string
    newOrderTargQty: number
    newOrderQty: number
    saleColor: string
    salesYoy: string
    targDifference: number
    num: number
    etlDt: string
    newOrderSpeedCountry: string
    rn: number
    newOrderSpeedDlr: string
    saleFlag: string
    saleTargQty: number
    saleSpeedCountry: string
    saleSpeedRegion: string
    saleSpeedDlr: string
    saleQty: number
  }
  info: {
    newOrderTargQty: number
    newOrderQty: number
    name: string
    id: string
    newOrderSpeedDlr: string
    saleTargQty: number
    saleColor: string
    saleSpeedCountry: string
    saleSpeedRegion: string
    targDifference: number
    // logo: '\\assets\\static\\images\\newSalesApp_model\\BOZ4X.png'
    logo: string
    saleSpeedDlr: string
    saleQty: number
    saleFlag: string
    newOrderSpeedCountry: string
    newOrderSpeedRegion: string
  }[]
}>({
  keepPreviousData: true,
  queryKey: [url, ymdId, tabType, checkDataUpdateNum, consultantListUpdateNum],
  queryFn: () => client(url, { ymdId: ymdId.value, type: tabType.value }),
  enabled: computed(() => !!ymdId.value)
})

const rightDatas = computed(() => {
  if (!data.value || !data.value.overview) {
    return []
  }
  const { overview } = data.value
  if (props.type === OrderSalesType.ORDER) {
    const { newOrderSpeedCountry, newOrderSpeedRegion } = overview
    return [
      {
        title: '全国进度',
        value: newOrderSpeedCountry
      },
      {
        title: '区域进度',
        value: newOrderSpeedRegion
      }
    ]
  }

  const { saleSpeedCountry, saleSpeedRegion } = overview
  return [
    {
      title: '全国进度',
      value: saleSpeedCountry
    },
    {
      title: '区域进度',
      value: saleSpeedRegion
    }
  ]
})

const itemValues = computed(() => {
  if (!data.value || !data.value.overview) {
    return []
  }
  const { overview } = data.value
  if (props.type === OrderSalesType.ORDER) {
    const { newOrderQty, newOrderTargQty, salesYoy, saleColor, rn, num } = overview
    return [
      {
        title: '当月实绩/月目标',
        values: [newOrderQty, newOrderTargQty]
      },
      {
        title: '同比',
        values: [toPercent(salesYoy, 1, false, '%', 1)],
        green: Number(salesYoy) > 0,
        red: Number(salesYoy) < 0
      },
      {
        title: '销售区域排名',
        values: [rn, num]
      }
    ]
  }

  const { saleQty, saleTargQty, salesYoy, saleColor, rn, num } = overview
  return [
    {
      title: '当月实绩/月目标',
      values: [saleQty, saleTargQty]
    },
    {
      title: '同比',
      values: [toPercent(salesYoy, 1, false, '%', 1)],
      green: Number(salesYoy) > 0,
      red: Number(salesYoy) < 0
    },
    {
      title: '销售区域排名',
      values: [rn, num]
    }
  ]
})

const progressData = computed(() => {
  if (!data.value || !data.value.overview) {
    return {
      targetGap: 0,
      progress: 0,
      countryValue: 0,
      areaValue: 0
    }
  }
  const { overview } = data.value
  const { targDifference } = overview
  const common = {
    targetGap: targDifference,
    targetGapRed: Number(targDifference) < 0
  }
  if (props.type === OrderSalesType.ORDER) {
    const { newOrderSpeedDlr, newOrderSpeedCountry, newOrderSpeedRegion } = overview
    return {
      ...common,
      progress: newOrderSpeedDlr,
      countryValue: newOrderSpeedCountry,
      areaValue: newOrderSpeedRegion
    }
  }

  const { saleSpeedDlr, saleSpeedCountry, saleSpeedRegion } = overview
  return {
    ...common,
    progress: saleSpeedDlr,
    countryValue: saleSpeedCountry,
    areaValue: saleSpeedRegion
  }
})

const legends = [
  { label: '重点关注', value: 1 },
  { label: '进度正常', value: 2 }
]

const noStandardNum = computed(() => {
  if (props.type === OrderSalesType.ORDER) {
    if (tabType.value === 1) {
      return data.value?.info.filter(({ saleFlag }) => saleFlag === '重点关注').length || 0
    }
    return (
      data.value?.info.filter(
        ({ newOrderQty, newOrderTargQty }) => Number(newOrderQty) < Number(newOrderTargQty)
      ).length || 0
    )
  }
  //
  if (tabType.value === 1) {
    return data.value?.info.filter(({ saleFlag }) => saleFlag === '重点关注').length || 0
  }
  return (
    data.value?.info.filter(({ saleQty, saleTargQty }) => Number(saleQty) < Number(saleTargQty))
      .length || 0
  )
})

const carDatas2D = computed(() => {
  if (!data.value) {
    return []
  }
  const datas2D = []
  let datas: any = []
  if (props.type === OrderSalesType.ORDER) {
    for (let index = 0; index < data.value.info.length; index++) {
      if (index % 3 === 0) {
        datas = []
        datas2D.push(datas)
      }
      const {
        id,
        name,
        logo,
        saleFlag,
        newOrderSpeedCountry,
        newOrderSpeedRegion,
        newOrderSpeedDlr,
        targDifference,
        newOrderQty,
        newOrderTargQty
      } = data.value.info[index]
      const isNull = isEmpty(newOrderSpeedDlr) || isEmpty(newOrderSpeedCountry)
      datas.push({
        carId: id,
        carName: name,
        imgUrl: `http://ids-mobile.gtmc.com.cn/staticFile${logo}`,
        actualy: toThousand(newOrderQty),
        actualyTotal: toThousand(newOrderTargQty),
        tag: saleFlag,
        blue: !isNull && Number(newOrderSpeedDlr) >= Number(newOrderSpeedCountry),
        orange: !isNull && Number(newOrderSpeedDlr) < Number(newOrderSpeedCountry),
        targetGap: toThousand(targDifference),
        targetGapRed: Number(targDifference) < 0,
        progress: newOrderSpeedDlr,
        countryValue: newOrderSpeedCountry,
        areaValue: newOrderSpeedRegion
      })
    }
  } else {
    for (let index = 0; index < data.value.info.length; index++) {
      if (index % 3 === 0) {
        datas = []
        datas2D.push(datas)
      }
      const {
        id,
        name,
        logo,
        saleFlag,
        saleSpeedCountry,
        saleSpeedRegion,
        saleSpeedDlr,
        targDifference,
        saleQty,
        saleTargQty
      } = data.value.info[index]
      const isNull = isEmpty(saleSpeedDlr) || isEmpty(saleSpeedCountry)
      datas.push({
        carId: id,
        carName: name,
        imgUrl: `http://ids-mobile.gtmc.com.cn/staticFile${logo}`,
        actualy: toThousand(saleQty),
        actualyTotal: toThousand(saleTargQty),
        tag: saleFlag,
        blue: !isNull && Number(saleSpeedDlr) >= Number(saleSpeedCountry),
        orange: !isNull && Number(saleSpeedDlr) < Number(saleSpeedCountry),
        targetGap: toThousand(targDifference),
        targetGapRed: Number(targDifference) < 0,
        progress: saleSpeedDlr,
        countryValue: saleSpeedCountry,
        areaValue: saleSpeedRegion
      })
    }
  }

  return datas2D
})

///////////////////////////////////// chart ///////////////////////////

const { remPx: grid } = usePx2rempx<{
  top: number
  right: number
  left: number
  bottom: number
}>({
  top: 10,
  right: 20,
  left: 10,
  bottom: 0
})

const { remPx: chartPxParams } = usePx2rempx<{
  fontSize: number
  barWidth: number
  standLineLeft: number
}>({
  fontSize: 12,
  barWidth: 16,
  standLineLeft: 40
})

const showMaxItem = 6

const sliderValue = ref(0)

let interval: NodeJS.Timeout

let timeout: NodeJS.Timeout

const timeoutValue = 5000

watch(sliderValue, () => {
  // console.log('sliderValue', sliderValue.value)
  if (!chartRef.value) return
  chartRef.value.chartRef.dispatchAction({
    type: 'dataZoom',
    startValue: sliderValue.value,
    endValue: sliderValue.value + showMaxItem - 1
  })
})

const chartDataMax = computed(() => data.value?.info.length || 0)

if (interval) clearInterval(interval)
if (timeout) clearTimeout(timeout)

const chartOption = computed(() => {
  if (!data.value) {
    return {}
  }
  const { info } = data.value
  const xAxisDatas = []
  const barDatas = []
  for (let index = 0; index < info.length; index++) {
    if (props.type === OrderSalesType.ORDER) {
      const { name, newOrderQty, newOrderTargQty, newOrderSpeedDlr } = info[index]
      xAxisDatas.push(name)
      barDatas.push({
        value: newOrderSpeedDlr,
        itemStyle: {
          color: newOrderQty >= newOrderTargQty ? '#009A94' : '#FF3D00'
        }
      })
    } else {
      const { name, saleQty, saleTargQty, saleSpeedDlr } = info[index]
      xAxisDatas.push(name)
      barDatas.push({
        value: saleSpeedDlr,
        itemStyle: {
          color: saleQty >= saleTargQty ? '#009A94' : '#FF3D00'
        }
      })
    }
  }
  const isExistStanda = !!barDatas.find(({ value }) => Number(value) > 100)
  return {
    grid: {
      ...grid.value,
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: '{c}%'
    },
    dataZoom: {
      show: false,
      startValue: 0,
      endValue: showMaxItem - 1
    },
    xAxis: {
      type: 'category',
      data: xAxisDatas,
      axisLabel: {
        interval: 0,
        color: '#799BC0',
        fontSize: chartPxParams.value.fontSize
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#375B82'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      max: isExistStanda ? undefined : 100,
      axisLabel: {
        color: '#799BC0',
        fontSize: chartPxParams.value.fontSize
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#1A3A5C'
        }
      }
    },
    series: [
      {
        type: 'bar',
        barWidth: chartPxParams.value.barWidth,
        data: barDatas,
        markLine: {
          symbol: 'none',
          lineStyle: {
            color: '#009A94'
          },
          label: {
            color: '#009A94',
            fontSize: chartPxParams.value.fontSize,
            formatter: (params: { name: string }) => {
              return isExistStanda ? `${params.name} \n \n` : `\n \n${params.name}`
            }
          },
          data: [
            [
              {
                x: chartPxParams.value.standLineLeft,
                yAxis: 100
              },
              {
                name: '达标线',
                x: '92%',
                yAxis: 100
              }
            ]
          ]
        }
      }
    ]
  }
})

startInterval()

const mouseover = debounce(() => {
  console.log('mouseover')
  handleChangeSlider()
}, 250)

const mousemove = debounce(() => {
  console.log('mousemove')
  handleChangeSlider()
}, 250)

function chartItemClick() {
  console.log('chartItemClick')
  handleChangeSlider()
}

const touchstart = () => {
  console.log('touchstart')
  handleChangeSlider()
}

function startInterval() {
  if (interval) clearInterval(interval)
  interval = setInterval(() => {
    sliderValue.value += showMaxItem
    if (sliderValue.value > chartDataMax.value) {
      sliderValue.value = 0
    }
  }, timeoutValue)
}

function handleArrorSlide(type: string) {
  if (interval) clearInterval(interval)
  if (type === 'left') {
    sliderValue.value -= showMaxItem
  } else {
    sliderValue.value += showMaxItem
  }
  if (sliderValue.value < 0) {
    sliderValue.value = 0
  } else if (sliderValue.value > chartDataMax.value - showMaxItem) {
    sliderValue.value = chartDataMax.value - showMaxItem
  }
  if (timeout) clearTimeout(timeout)
  timeout = setTimeout(() => {
    startInterval()
  }, timeoutValue)
}

function handleChangeSlider() {
  if (interval) clearInterval(interval)
  if (timeout) clearTimeout(timeout)
  timeout = setTimeout(() => {
    startInterval()
  }, timeoutValue)
}
</script>

<template>
  <Segment
    :height="segmentHeight"
    :title="type === OrderSalesType.ORDER ? '当月新增订单表现' : '当月销售表现'"
    :loading="isFetching"
  >
    <template #right>
      <div class="header-right">
        <ArrowValue
          v-for="(data, index) in rightDatas"
          :key="data.title"
          :title="data.title"
          :value="data.value"
          :color="index === 0 ? 'country' : 'region'"
        />
        <div class="date">{{ `数据截止日期: ${data?.overview?.etlDt || ''}` }}</div>
      </div>
    </template>
    <div class="content">
      <OrderSalesProgress
        :flag="data?.overview?.saleFlag"
        :itemValues="itemValues"
        :progressData="progressData"
      />
      <div class="chart-car-container">
        <div class="header">
          <div class="left">
            <div class="tabs">
              <div
                class="tab"
                v-for="tab in tabs"
                :key="tab.value"
                :class="{ checked: tab.value === tabType }"
                @click="tabType = tab.value"
              >
                {{ tab.label }}
              </div>
            </div>
            <div class="legends">
              <div class="legend" v-for="legend in legends" :key="legend.value">
                {{ legend.label }}
              </div>
            </div>
          </div>
          <div class="right">
            <div>{{ `未达标${tabType === 1 ? '车型' : '人数'}` }}</div>
            <div class="value1">{{ noStandardNum }}</div>
            <div class="value2">{{ `/${data?.info.length || 0}` }}</div>
          </div>
        </div>
        <KeepAlive>
          <div v-if="tabType === 1" ref="carContainerRef" class="car-items">
            <a-carousel
              v-if="carDatas2D.length"
              ref="carouselRef"
              arrows
              :autoplay="true"
              :autoplaySpeed="5000"
              :dots="false"
            >
              <template #prevArrow>
                <SvgIcon class="arrow-left" name="order-chart-slider-left" :size="16" />
              </template>
              <template #nextArrow>
                <SvgIcon class="arrow-right" name="order-chart-slider-right" :size="16" />
              </template>
              <div
                class="car-item"
                :class="{ 'small-car-item': false }"
                v-for="(carDatas, index) in carDatas2D"
                :key="index"
              >
                <div class="item" v-for="carData in carDatas" :key="carData.carId">
                  <div class="img-name">
                    <img :src="carData.imgUrl" />
                    <div class="name">{{ carData.carName }}</div>
                  </div>
                  <div class="progress-container">
                    <div class="actual-values">
                      <div class="label">实际</div>
                      <div class="num-total">
                        <div class="num">{{ carData.actualy }}</div>
                        <div class="total">{{ `/${carData.actualyTotal}` }}</div>
                      </div>
                      <div class="tag" :class="{ blue: carData.blue, orange: carData.orange }">
                        {{ carData.tag }}
                      </div>
                    </div>
                    <div class="progress-bg">
                      <div
                        class="progress"
                        :class="{ blue: carData.blue, orange: carData.orange }"
                        :style="{
                          width: `${Number(carData.progress) > 100 ? 100 : carData.progress}%`
                        }"
                      >
                        {{ `进度：${carData.progress || '-'}%` }}
                      </div>
                      <div class="target-num">
                        <div>计划差：</div>
                        <div class="num" :class="{ red: carData.targetGapRed }">
                          {{ carData.targetGap }}
                        </div>
                      </div>
                      <div class="progress-point">
                        <!-- <div
                          class="top"
                          :style="{ left: `${carData.countryValue}%` }"
                          :class="{
                            zero: carData.countryValue < 5,
                            max: carData.countryValue > 95
                          }"
                        >
                          {{ `全国进度：${carData.countryValue}%` }}
                        </div> -->
                        <div
                          class="arrow-top"
                          :class="{
                            'arrow-max': carData.countryValue > 95
                          }"
                          :style="{
                            left: `${
                              Number(carData.countryValue) > 100 ? 100 : carData.countryValue
                            }%`
                          }"
                        />
                      </div>
                      <div class="progress-point">
                        <!-- <div
                          class="bottom"
                          :style="{ left: `${carData.areaValue}%` }"
                          :class="{
                            zero: carData.areaValue < 5,
                            max: carData.areaValue > 95
                          }"
                        >
                          {{ `区域进度${carData.areaValue}%` }}
                        </div> -->
                        <div
                          class="arrow-bottom"
                          :class="{
                            'arrow-max': carData.areaValue > 95
                          }"
                          :style="{
                            left: `${Number(carData.areaValue) > 100 ? 100 : carData.areaValue}%`
                          }"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-carousel>
          </div>
          <div
            v-else
            class="chart-item"
            @mouseover="mouseover"
            @mousemove="mousemove"
            @touchstart="touchstart"
            @click="chartItemClick"
          >
            <Chart ref="chartRef" :option="chartOption" />
            <div class="data-zoom">
              <SvgIcon
                class="arrow-left"
                name="order-chart-slider-left"
                :size="16"
                @click="handleArrorSlide('left')"
              />
              <a-slider
                v-model:value="sliderValue"
                :tooltipOpen="false"
                :max="chartDataMax"
                :step="6"
                @change="handleChangeSlider"
              >
                <template #mark>
                  <div>mark</div>
                </template>
              </a-slider>
              <SvgIcon
                class="arrow-right"
                name="order-chart-slider-right"
                :size="16"
                @click="handleArrorSlide('right')"
              />
            </div>
          </div>
        </KeepAlive>
      </div>
    </div>
  </Segment>
</template>

<style lang="less" scoped>
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  .date {
    color: #4a6d93;
  }
}
.content {
  height: calc(100% - 32px);
  padding: 12px 10px;
  .chart-car-container {
    padding-top: 10px;
    // height: 100%;
    height: calc(100% - 134px);
    // height: 228px;
    // height: calc(100% - 134 * (100vh - (72px + 128px + 8px * 3 + 8px * 2)) / (2 * 372));
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      height: 24px;
      .left {
        display: flex;
        align-items: center;
        .tabs {
          display: flex;
          align-items: center;
          .tab {
            height: 24px;
            padding: 0px 8px;
            border-radius: 100px;
            color: var(--unnamed, #fff);
            text-align: center;

            /* 文字/07内文-文本Regular */
            font-family: Alibaba PuHuiTi 2;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px; /* 183.333% */
            &.checked {
              background: #1549ff;
            }
          }
        }
        .legends {
          margin-left: 20px;
          display: flex;
          align-items: center;
          gap: 12px;
          .legend {
            position: relative;
            padding-left: 10px;
            color: #9fbfe1;
            font-family: Alibaba PuHuiTi 2;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: calc(50% + 2px);
              transform: translateY(-50%);
              width: 6px;
              height: 6px;
            }
            &:nth-child(1) {
              &::before {
                background: #ff3d00;
              }
            }
            &:nth-child(2) {
              &::before {
                background: #009a94;
              }
            }
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        color: var(--unnamed, #fff);
        font-family: Alibaba PuHuiTi 2;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px; /* 116.667% */
        .value1,
        .value2 {
          font-family: DIN Alternate;
          font-size: 14px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
        }
        .value1 {
          margin-left: 3px;
          color: var(--01, #ff5656);
        }
        .value2 {
          color: #fff;
        }
      }
    }
    .chart-item {
      margin-top: 8px;
      height: calc(100% - 24px - 8px);
      border-radius: 4px;
      border: 1px solid rgba(78, 117, 255, 0.4);
      :deep(.chart) {
        height: calc(100% - 6px - 12px - 5px);
      }
      .data-zoom {
        position: relative;
        margin-top: 5px;
        padding: 0 12px;
        height: 6px;
        .arrow-left {
          position: absolute;
          z-index: 9;
          left: 16px;
          bottom: 8px;
        }
        .arrow-right {
          position: absolute;
          z-index: 9;
          right: 16px;
          bottom: 8px;
        }

        :deep(.ant-slider) {
          overflow: hidden;
          height: 6px;
          margin: 0;
          .ant-slider-rail {
            height: 6px;
            background: rgba(255, 255, 255, 0.08);
          }
          .ant-slider-track {
            display: none;
          }
          .ant-slider-handle {
            // background: #31506f;
            // margin-left: calc(96px / 2);
            &::before {
              content: '';
              position: absolute;
              inset-inline-start: 0;
              inset-block-start: 0;
              // width: 0;
              height: 6px;
              width: 96px;
              background: #31506f;
              top: 50%;
              transform: translateY(-50%);
              margin-right: calc(96px / 2);
              border-left: 3px solid #6e8fb0;
              border-right: 3px solid #6e8fb0;
            }
            &::after {
              content: '';
              position: absolute;
              box-shadow: none;
              width: 0;
              height: 0;
              inset-inline-start: 0;
              inset-block-start: 0;
              border-radius: none;
            }
          }
        }
      }
    }
    .car-items {
      height: calc(100% - 24px - 8px);
      margin-top: 8px;
      border-radius: 4px;
      border: 1px solid rgba(78, 117, 255, 0.4);
      :deep(.ant-carousel) {
        height: 100%;
        .slick-slider {
          height: 100%;
          .slick-list {
            height: 100%;
            .slick-track {
              height: 100%;
              .slick-slide {
                height: 100%;
                & > div {
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .arrow-left {
        left: 10px;
        z-index: 9;
      }
      .arrow-right {
        right: 10px;
        z-index: 9;
      }
      .car-item {
        height: 100%;
        padding: 4px 28px 12px;
        .item {
          height: 33.33333333%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin: 0 12px;
          .img-name {
            white-space: nowrap;
            height: 100%;
            width: 92px;
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              white-space: nowrap;
              // width: 64px;
              // height: 42px;
              height: calc(100% - 14px);
            }
            .name {
              transform: translateY(-2px);
              color: #c3caf8;
              font-family: Alibaba PuHuiTi 2;
              font-size: 14px;
              font-style: normal;
              font-weight: 600;
              line-height: 14px; /* 100% */
            }
          }

          .progress-container {
            flex: 1;
            .actual-values {
              margin-bottom: 6px;
              display: flex;
              align-items: center;
              .label {
                color: #799bc0;
                font-family: Alibaba PuHuiTi 2;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 14px; /* 100% */
              }
              .num-total {
                margin-left: 6px;
                display: flex;
                align-items: baseline;
                font-family: DIN Alternate;
                font-style: normal;
                font-weight: 700;
                line-height: 20px;
                .num {
                  color: #fff;
                  font-size: 16px;
                }
                .total {
                  color: rgba(255, 255, 255, 0.8);
                  font-size: 12px;
                }
              }
              .tag {
                margin-left: 12px;
                padding: 4px;
                border-radius: 4px;
                text-align: center;
                font-family: Alibaba PuHuiTi 2;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 14px; /* 116.667% */
                &.blue {
                  color: #009a94;
                  background: rgba(0, 154, 148, 0.16);
                }
                &.orange {
                  color: #ff5b27;
                  background: rgba(255, 91, 39, 0.16);
                }
              }
            }
            .progress-bg {
              width: 100%;
              position: relative;
              height: 18px;
              background: rgba(227, 236, 255, 0.1);
              text-align: right;
              padding: 0px 8px;
              .progress {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                padding-left: 8px;
                text-align: left;
                color: var(--unnamed, #fff);
                font-family: Alibaba PuHuiTi 2;
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 18px; /* 83.333% */
                white-space: nowrap;
                &.blue {
                  background: linear-gradient(270deg, #0dd3ff 0%, #009a94 100%);
                }
                &.orange {
                  background: linear-gradient(270deg, #ff8a00 0%, #ff3d00 100%);
                }
              }
              .target-num {
                position: absolute;
                white-space: nowrap;
                right: 4px;
                display: inline-flex;
                align-items: center;
                color: var(--unnamed, #fff);
                text-align: right;
                font-family: Alibaba PuHuiTi 2;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px; /* 83.333% */
                .num {
                  font-weight: 600;
                  &.red {
                    color: #ff5656;
                  }
                }
              }
              .progress-point {
                font-family: Alibaba PuHuiTi 2;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 14px; /* 116.667% */
                white-space: nowrap;
                .zero {
                  transform: none;
                }
                .top {
                  position: absolute;
                  top: -22px;
                  left: 0;
                  transform: translateX(calc(-50% + 7px));
                  color: var(--03, #ffbb53);
                }
                .arrow-top {
                  position: absolute;
                  top: -5px;
                  left: 0;
                  border-top: 5px solid #ffbb53;
                  border-right: 6px solid transparent;
                  border-bottom: 5px solid transparent;
                  border-left: 6px solid transparent;
                  border-radius: 4px;
                  &.arrow-max {
                    transform: translateX(-6px);
                  }
                }
                .bottom {
                  position: absolute;
                  bottom: -18px;
                  left: 0;
                  transform: translateX(calc(-50% + 7px));
                  color: #e17ef1;
                }
                .arrow-bottom {
                  position: absolute;
                  bottom: -5px;
                  left: 0;
                  border-top: 5px solid transparent;
                  border-right: 6px solid transparent;
                  border-bottom: 5px solid #e17ef1;
                  border-left: 6px solid transparent;
                  border-radius: 4px;
                  &.arrow-max {
                    transform: translateX(-6px);
                  }
                }
                .max {
                  left: auto !important;
                  right: 0;
                  transform: none;
                }
              }
            }
          }
        }
      }
      .small-car-item {
        padding: 2px 28px 6px;
        .item {
          gap: 12px;
          margin: 0 12px;
          .img-name {
            width: 92px;
            img {
              height: calc(100% - 14px);
            }
            .name {
              transform: translateY(-1px);
              font-size: 12px;
              line-height: 12px; /* 100% */
            }
          }

          .progress-container {
            .actual-values {
              margin-bottom: 3px;
              .label {
                color: #799bc0;
                font-size: 12px;
                line-height: 12px;
              }
              .num-total {
                margin-left: 6px;
                line-height: 10px;
                .num {
                  font-size: 12px;
                }
                .total {
                  font-size: 12px;
                }
              }
              .tag {
                margin-left: 12px;
                padding: 2px 4px;
                border-radius: 2px;
                font-size: 12px;
                line-height: 12px;
              }
            }
            .progress-bg {
              height: 9px;
              padding: 0px 8px;
              .progress {
                padding-left: 8px;
                font-size: 12px;
                line-height: 12px;
              }
              .target-num {
                transform: translateY(-2px);
                font-size: 12px;
                line-height: 12px;
              }
              .progress-point {
                font-size: 12px;
                line-height: 12px;
                .top {
                  top: -11px;
                  transform: translateX(calc(-50% + 7px));
                }
                .arrow-top {
                  top: -5px;
                  left: 0;
                  border-top: 5px solid #ffbb53;
                  border-right: 6px solid transparent;
                  border-bottom: 5px solid transparent;
                  border-left: 6px solid transparent;
                  border-radius: 4px;
                  &.arrow-max {
                    transform: translateX(-6px);
                  }
                }
                .bottom {
                  bottom: -18px;
                  transform: translateX(calc(-50% + 7px));
                }
                .arrow-bottom {
                  bottom: -5px;
                  left: 0;
                  border-top: 5px solid transparent;
                  border-right: 6px solid transparent;
                  border-bottom: 5px solid #e17ef1;
                  border-left: 6px solid transparent;
                  border-radius: 4px;
                  &.arrow-max {
                    transform: translateX(-6px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
